<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <box :title="title"></box>
    </div>
</body>
<script>
    const { ref } = Vue
    const app = Vue.createApp({
        setup (props, context) {
            let title = ref('父组件中定义的 title')
            return {
                title
            }
        },
    })

    app.component('box', {
        template: `<div>
                想卖掉房子去环游世界，可是房东死活都不同意。
            </div>`,
        props: {
            title: String
        },
        // setup 中 props 是接收的参数，该参数一定要在 props 选项中接收
        setup (props, context) {
            // console.log(props);
            console.log(context);
        }
    })

    app.mount('#app')
</script>

</html>